<template>
  <view class="pages">
    <!-- <view class="hr"></view> -->
    <view class="cell">
      <view class="title">
        <input maxlength="50" v-model="form.warnEventContent" :placeholder="warnTaskType===1?'请输入日程':'请输入提醒'" />
      </view>
    </view>
    <view class="cell" @tap="chooseCycle" v-if="warnTaskType===3">
      <viwe class="cell-left">重复</viwe>
      <viwe class="cell-right">
        <view>{{form.warnTypeText}}</view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view>
      <view class="cell">
        <viwe class="cell-left">提醒时间</viwe>
        <viwe class="cell-right">
          <uni-datetime-picker v-model="form.warnTime" type="date" :border="false"></uni-datetime-picker>
          <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
        </viwe>
      </view>
      <!-- <view class="cell">
        <viwe class="cell-left">结束时间</viwe>
        <viwe class="cell-right">
          <uni-datetime-picker v-model="form.endTime" :border="false"></uni-datetime-picker>
          <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
        </viwe>
      </view> -->
    </view>
    <view class="cell">
      <viwe class="cell-left">事件时间</viwe>
      <viwe class="cell-right">
        <uni-datetime-picker v-model="form.warnEventTime" :border="false"></uni-datetime-picker>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="cell" @tap="chooseLevel" v-if="warnTaskType===1">
      <viwe class="cell-left">重要性</viwe>
      <viwe class="cell-right">
        <view>{{form.warnEventLevelText}}</view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="cell" v-if="warnTaskType===1">
      <view class="title">
        <input maxlength="200" v-model="form.remark" placeholder="请输入备注" />
      </view>
    </view>
    <view class="hr"></view>
    <view class="botton">
      <button class="botton-botton" @tap="submit">提交</button>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
let id = null
let name = ''
export default {
  data() {
    return {
      warnTaskType: 3,// 1-日程 2-提醒 3-提醒模板
      form: {
        id: '',
        warnUserId: '',
        warnType: 1,
        warnTypeText: '每日',
        warnTime: '',
        warnEventTime: '',
        warnEventContent: '',
        warnEventLevel: 0,
        warnEventLevelText: '普通',
        remark: ''
      }
    }
  },
  computed: {
    ...mapGetters('user', {
      userInfo: 'getuserinfo'
    })
  },
  onLoad(option) {
    const _this = this
    id = option.id
    name = option.name
    _this.warnTaskType = option.type * 1
    uni.setNavigationBarTitle({
      title: option.warnTaskType * 1 === 1 ? '添加日程' : '添加提醒 '
    });
    uni.getStorage({
      key: 'schedule_key',
      success: function (res) {
        uni.removeStorage({ key: 'schedule_key' });
        for (let key in _this.form) {
          _this.form[key] = res.data[key]
        }
        id = option.warnEventCustomerId
        name = option.warnEventCustomer
      }
    });
  },
  methods: {
    /**提交*/
    submit() {
      const _this = this;
      let params = {
        ..._this.form,
        warnTaskType: _this.warnTaskType,
        warnUserId: _this.userInfo.id,
      }
      if (id) {
        params = {
          ..._this.form,
          warnTaskType: _this.warnTaskType,
          warnUserId: _this.userInfo.id,
          warnEventCustomerId: id,
          warnEventCustomer: name,
          warnEventCustomerJson: `[{id:${id},name:${name}}]`
        }
      }
      if (_this.form.id) {
        _this.$post('/sale/wx/warn_task/update_data', { ...params }, true).then(res => {
          if (res.code * 1 === 200) {
            uni.showToast({
              title: '添加成功',
              icon: 'none'
            })
            setTimeout(() => {
              // uni.switchTab({
              //   url: '/pages/tabbar/schedule'
              // });
              uni.navigateBack({
                delta: 1
              });
            }, 1000)
          }
        })
        return
      }
      _this.$post('/sale/wx/warn_task/add_data', { ...params }, true).then(res => {
        if (res.code * 1 === 200) {
          uni.showToast({
            title: '添加成功',
            icon: 'none'
          })
          setTimeout(() => {
            // uni.switchTab({
            //   url: '/pages/tabbar/schedule'
            // });
            uni.navigateBack({
              delta: 1
            });
          }, 1000)
        }
      })
    },
    /**选择周期*/
    chooseCycle() {
      let _this = this
      let itemList = ['每日', '每周', '每月', '每季度', '每年',]
      uni.showActionSheet({
        itemList: itemList,
        success: function (res) {
          _this.form.warnType = res.tapIndex + 1
          _this.form.warnTypeText = itemList[res.tapIndex]
        }
      });
    },
    chooseLevel() {
      let _this = this
      let itemList = ['普通']
      uni.showActionSheet({
        itemList: itemList,
        success: function (res) {
          _this.form.warnEventLevel = res.tapIndex
          _this.form.warnEventLevelText = itemList[res.tapIndex]
        }
      });
    },
    /**检测是否有@符号*/
    changeContent() {
      let _this = this
      console.log(_this.form.content);
      const text = _this.form.content

    },
  }
}
</script>

<style lang="scss" scope>
.pages {
  padding: 10px 3vw;
}
.cell {
  width: 94vw;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-right {
    display: flex;
    font-size: 16px;
    color: #96968e;
    align-items: center;
    .uni-icons {
      padding-left: 5px;
    }
  }
}
.title {
  height: 45px;
  width: 94vw;
  background: #f6f6f6;
  border-radius: 10px;
  font-weight: bold;
  input {
    width: 100%;
    height: 100%;
    padding-left: 10px;
  }
}
.hr {
  background: #ddd;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
.botton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  &-botton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    border-radius: 20px;
    width: 70vw;
    color: #fff;
    background: #ed7467;
  }
}
</style>
